<template>
  <div class="app-container">
    <div class="contentBox">
      <div class="searchBox">
        <el-form :model="queryParams" ref="queryRef" :inline="true" @submit.prevent>
          <el-form-item prop="time" style="margin: 0 6px 6px 0;">
            <el-date-picker
                v-model="queryParams.time"
                type="datetimerange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY/MM/DD HH:mm:ss"
                value-format="YYYY/MM/DD HH:mm:ss"
                @change="handleQuery()"
            />
          </el-form-item>
          <el-form-item prop="operationType" style="margin: 0 6px 6px 0;">
            <el-select class="inputBox" v-model="queryParams.operationType" placeholder="请选择类型" clearable
              @change="handleQuery()">
              <el-option v-for="dict in good_in_out_storage" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item prop="goodsName" style="margin: 0 6px 6px 0;">
            <el-input
                class="inputBox"
                v-model="queryParams.goodsName"
                placeholder="商品名称查询"
                clearable
                @keyup.enter="handleQuery()"
            />
          </el-form-item>
          <el-form-item prop="goodsId" style="margin: 0 6px 6px 0;">
            <el-input
                class="inputBox"
                v-model="queryParams.goodsId"
                placeholder="商品ID查询"
                clearable
                @keyup.enter="handleQuery()"
            />
          </el-form-item>
          <el-form-item prop="warehouseId" style="margin: 0 6px 6px 0;">
            <div class="searchValueBox pageFlex pageAlignCenter" @click="showTableModal('warehouseId')">
              <el-text class="value">{{ queryParams.warehouseId || '请选择仓库' }}</el-text>
              <el-icon><ArrowRight /></el-icon>
            </div>
          </el-form-item>
          <el-form-item prop="shelfId" style="margin: 0 6px 6px 0;">
            <div class="searchValueBox pageFlex pageAlignCenter" @click="showTableModal('shelfId')">
              <el-text class="value">{{ queryParams.shelfId || '请选择货架' }}</el-text>
              <el-icon><ArrowRight /></el-icon>
            </div>
          </el-form-item>
          <el-form-item prop="locationId" style="margin: 0 6px 6px 0;" @click="showTableModal('locationId')">
            <div class="searchValueBox pageFlex pageAlignCenter">
              <el-text class="value">{{ queryParams.locationId || '请选择货位' }}</el-text>
              <el-icon><ArrowRight /></el-icon>
            </div>
          </el-form-item>
<!--          <el-form-item prop="entryVoucherNo" style="margin: 0 6px 6px 0;" v-if="queryParams.operationType === '0'">-->
<!--            <el-input-->
<!--                class="inputBox"-->
<!--                v-model="queryParams.entryVoucherNo"-->
<!--                placeholder="入库凭证号查询"-->
<!--                clearable-->
<!--                @keyup.enter="handleQuery"-->
<!--            />-->
<!--          </el-form-item>-->
<!--          <el-form-item prop="exitVoucherNo" style="margin: 0 6px 6px 0;" v-else-if="queryParams.operationType === '1'">-->
<!--            <el-input-->
<!--                class="inputBox"-->
<!--                v-model="queryParams.exitVoucherNo"-->
<!--                placeholder="出库凭证号查询"-->
<!--                clearable-->
<!--                @keyup.enter="handleQuery"-->
<!--            />-->
<!--          </el-form-item>-->
          <el-form-item style="margin: 0 6px 6px 0;">
            <el-button class="normalFormBg searchBtn" icon="Search" @click="handleQuery"></el-button>
            <el-button class="normalFormBg searchBtn" icon="Refresh" @click="resetQuery"></el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-row :gutter="10" style="margin: 16px 0;">
        <el-col :span="1.5">
          <div class="normalBtn pageFlex pageFlexCenter" @click="handleExport" v-hasPermi="['gasManage:stockManage:inventoryHistory:export']">
            <el-icon class="normalBtn_icon2"><Download /></el-icon>
            <div class="normalBtn_text">按筛选条件导出</div>
          </div>
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        :data="dataList"
        border>
        <el-table-column label="日期" width="155" :show-overflow-tooltip="true" fixed="left">
          <template #default="scope">
            <div>{{setTimeFormat(scope.row.createTime)}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="goodsNo" label="商品编码" width="150" :show-overflow-tooltip="true" fixed="left"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称" width="150" :show-overflow-tooltip="true"></el-table-column>
<!--        <el-table-column prop="cover" label="商品图片" width="80" align="center">-->
<!--          <template #default="scope">-->
<!--            <div class="tableImgBox1">-->
<!--              <el-image class="img" fit="contain" lazy :src="setCoverUrl(scope.row.cover)"-->
<!--                        @click="handlePreviewShow(setCoverUrl(scope.row.cover))" v-if="scope.row.cover" />-->
<!--              <div class="emptyBox" v-else>暂无图标</div>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="warehouseId" label="所属仓库" width="180" :show-overflow-tooltip="true">
          <template #default="scope">
            <div style="width: 154px;" class="textOverflow1">{{ scope.row.warehouseId == 0 ? '暂无' : scope.row.warehouseId}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="shelfId" label="所属货架" width="180" :show-overflow-tooltip="true">
          <template #default="scope">
            <div style="width: 154px;" class="textOverflow1">{{ scope.row.shelfId || '暂无'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="locationId" label="所属货位" width="180" :show-overflow-tooltip="true">
          <template #default="scope">
            <div style="width: 154px;" class="textOverflow1">{{ scope.row.locationId == 0 ? '暂无' : scope.row.locationId}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="spec" label="规格" width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="unit" label="单位" width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column width="120" :show-overflow-tooltip="true">
          <template #header="scope">
            <div>{{queryParams.operationType === '0' ? '入库数量' : queryParams.operationType === '1' ? '出库数量' : '出/入库数量'}}</div>
          </template>
          <template #default="scope">
            <div style="max-width: 100px;" class="textOverflow1">{{scope.row.number}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="costPrice" label="采购成本价格" width="120" :show-overflow-tooltip="true">
          <template #default="scope">
            <div style="max-width: 100px;" class="textOverflow1">￥{{scope.row.costPrice}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="市场参考价" width="120" :show-overflow-tooltip="true">
          <template #default="scope">
            <div style="max-width: 100px;" class="textOverflow1">￥{{scope.row.price}}</div>
          </template>
        </el-table-column>
        <el-table-column width="120" :show-overflow-tooltip="true">
          <template #header="scope">
            <div>{{queryParams.operationType === '0' ? '入库人' : queryParams.operationType === '1' ? '出库人' : '出/入库人'}}</div>
          </template>
          <template #default="scope">
            <div style="max-width: 100px;" class="textOverflow1">{{scope.row.operatorName}}</div>
          </template>
        </el-table-column>
        <el-table-column width="200" :show-overflow-tooltip="true">
          <template #header="scope">
            <div>{{queryParams.operationType === '0' ? '入库凭证号' : queryParams.operationType === '1' ? '出库凭证号' : '出/入库凭证号'}}</div>
          </template>
          <template #default="scope">
            <div style="max-width: 170px;" class="textOverflow1">{{scope.row.operationType === 0 ? scope.row.entryVoucherNo : scope.row.exitVoucherNo }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作类别" width="120" :show-overflow-tooltip="true">
          <template #default="scope">
            <div v-for="(item, index) in good_in_out_storage" :key="index" v-show="item.value == scope.row.operationType">
              <el-tag :type="item.elTagType" v-if="item.elTagType">{{ item.label }}</el-tag>
              <div v-else>{{ item.label }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template #default="scope">
            <div class="pageFlex pageFlexCenter">
              <div class="pageFlex pageFlexCenter btnSetBox" @click="handleDetail(scope.row)">
                <img src="@/assets/images/fileManage.png" class="img">
                <div class="text">详情</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无数据" style="color: var(--el-color-primary);"/>
        </template>
      </el-table>
      <div class="pageFlex pageAlignCenter pageSpaceBetween" style="margin-top: 20px;">
        <div class="totalText">共计 {{total}} 条</div>
        <el-pagination background layout="sizes, prev, pager, next" :total="total" :current-page="queryParams.pageNum" :page-size="queryParams.pageSize"
          @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
      </div>
    </div>
    <el-dialog v-model="modalShow" :title="modalTitle" width="950">
      <div class="modalBox">
        <el-descriptions :column="4" border direction="vertical">
          <el-descriptions-item :rowspan="2" :width="200" label="商品图片">
            <el-image style="width: 100px; height: 100px" :src="setCoverUrl(form.cover)" @click="handlePreviewShow(setCoverUrl(form.cover))" v-if="modalShow"/>
          </el-descriptions-item>
          <el-descriptions-item label="商品ID" :width="200">{{form.goodsId}}</el-descriptions-item>
          <el-descriptions-item label="商品编码" :width="200">{{form.goodsNo || '暂无'}}</el-descriptions-item>
          <el-descriptions-item label="商品名称" :width="200">{{form.goodsName}}</el-descriptions-item>
          <el-descriptions-item label="仓库ID"  :width="200">{{form.warehouseId || '暂无'}}</el-descriptions-item>
          <el-descriptions-item label="货架ID"  :width="200">{{form.shelfId || '暂无'}}</el-descriptions-item>
          <el-descriptions-item label="货位ID"  :width="200">{{form.locationId || '暂无'}}</el-descriptions-item>
          <el-descriptions-item label="采购成本价格" :width="200">￥{{ form.costPrice }}</el-descriptions-item>
          <el-descriptions-item label="市场参加价" :width="200">￥{{ form.price }} </el-descriptions-item>
          <el-descriptions-item label="单位" :width="200">{{ form.unit || '暂无' }}</el-descriptions-item>
          <el-descriptions-item label="规格" :width="200">{{ form.specs || '暂无' }}</el-descriptions-item>
          <div v-if="form.operationType === 0">
            <el-descriptions-item label="采购人" :width="200">{{ form.purchaseName || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="手机号" :width="200">{{ form.purchaseMobile || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="采购数量" :width="200">{{ form.purchaseNumber || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="采购凭证号" :width="200">{{ form.purchaseVoucherNo || '暂无' }}</el-descriptions-item>
            <el-descriptions-item :width="200" label="采购凭证">
              <div v-if="modalShow">
                <el-image style="width: 100px; height: 100px" :src="setCoverUrl(form.purchaseVoucher)" v-if="form.purchaseVoucher"
                  @click="handlePreviewShow(setCoverUrl(form.purchaseVoucher))"/>
                <div v-else>暂无图片</div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="采购说明" :span="3">{{ form.purchaseRemarks || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="入库人" :width="200">{{ form.operatorName || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="入库数量" :width="200">{{ form.number || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="入库凭证号" :width="200" :span="2">{{ form.entryVoucherNo || '暂无' }}</el-descriptions-item>
            <el-descriptions-item :width="200" label="入库凭证">
              <el-image style="width: 100px; height: 100px" :src="setCoverUrl(form.entryVoucher)" v-if="modalShow"
                @click="handlePreviewShow(setCoverUrl(form.entryVoucher))"/>
            </el-descriptions-item>
            <el-descriptions-item label="入库说明" :span="3">{{ form.notes || '暂无' }}</el-descriptions-item>
          </div>
          <div v-if="form.operationType === 1">
            <el-descriptions-item label="出库人" :width="200">{{ form.operatorName || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="出库数量" :width="200">{{ form.number || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="出库凭证号" :width="200" :span="2">{{ form.exitVoucherNo || '暂无' }}</el-descriptions-item>
            <el-descriptions-item :width="200" label="出库凭证">
              <el-image style="width: 100px; height: 100px" :src="setCoverUrl(form.exitVoucher)" v-if="modalShow"
                @click="handlePreviewShow(setCoverUrl(form.exitVoucher))"/>
            </el-descriptions-item>
            <el-descriptions-item label="出库说明" :span="3">{{ form.notes || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="领用人" :width="200">{{ form.receivedName || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="手机号" :width="200">{{ form.receivedMobile || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="领用数量" :width="200">{{ form.receivedNumber || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="领用凭证号" :width="200">{{ form.receivedVoucherNo || '暂无' }}</el-descriptions-item>
            <el-descriptions-item :width="200" label="领用凭证">
              <div v-if="modalShow">
                <el-image style="width: 100px; height: 100px" :src="setCoverUrl(form.receivedVoucher)" v-if="form.receivedVoucher"
                  @click="handlePreviewShow(setCoverUrl(form.receivedVoucher))"/>
                <div v-else>暂无图片</div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="领用说明" :span="3">{{ form.receivedRemarks || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="配送人" :width="200">{{ form.deliveryName || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="手机号" :width="200">{{ form.deliveryMobile || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="配送数量" :width="200">{{ form.deliveryNumber || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="配送凭证号" :width="200">{{ form.deliveryVoucherNo || '暂无' }}</el-descriptions-item>
            <el-descriptions-item :width="200" label="配送凭证">
              <div v-if="modalShow">
                <el-image style="width: 100px; height: 100px" :src="setCoverUrl(form.deliveryVoucher)" v-if="form.deliveryVoucher"
                  @click="handlePreviewShow(setCoverUrl(form.deliveryVoucher))"/>
                <div v-else>暂无图片</div>
              </div>
              
            </el-descriptions-item>
            <el-descriptions-item label="配送说明" :span="3">{{ form.deliveryRemarks || '暂无' }}</el-descriptions-item>
          </div>
        </el-descriptions>
      </div>
    </el-dialog>
    <el-dialog v-model="warehouseShow" title="选择所属仓库" width="900">
      <div class="tableModalBox" v-if="warehouseShow">
        <div class="tableModalBox_top pageFlex pageAlignCenter">
          <div class="line"></div>
          <div class="title">请进行选择</div>
        </div>
        <div class="searchBox">
          <el-form :model="warehouseParams" ref="warehouseTableModal" :inline="true" @submit.prevent>
            <el-form-item prop="name" style="margin: 0 6px 0 0;">
              <el-input
                  class="inputBox"
                  v-model="warehouseParams.name"
                  placeholder="请输入仓库名查询"
                  clearable
                  @keyup.enter="handleTableModalQuery()"
              />
            </el-form-item>
            <el-form-item style="margin: 0 6px 0 0;">
              <el-button class="normalFormBg searchBtn" icon="Search" @click="handleTableModalQuery()"></el-button>
              <el-button class="normalFormBg searchBtn" icon="Refresh" @click="resetTableModalQuery()"></el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="tableBox">
          <el-table
            ref="warehouseTableRef"
            v-loading="warehouseLoading"
            :data="warehouseDataList"
            border
            height="400"
            @select="handleTableModalSelect"
            @select-all="handleTableModalAll">
            <el-table-column type="selection" width="55" :selectable="setTableModalSelectable"/>
            <el-table-column prop="id" label="仓库ID" width="200" :show-overflow-tooltip="true" fixed="left"></el-table-column>
            <el-table-column prop="warehouseNo" label="仓库编码" width="150" :show-overflow-tooltip="true" fixed="left"></el-table-column>
            <el-table-column prop="name" label="仓库名称" width="200" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="cover" label="仓库图片" width="80" align="center">
              <template #default="scope">
                <div class="tableImgBox1">
                  <el-image class="img" fit="contain" lazy :src="setCoverUrl(scope.row.cover)"
                    @click="handlePreviewShow(setCoverUrl(scope.row.cover))" v-if="scope.row.cover" />
                  <div class="emptyBox" v-else>暂无图片</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="capacity" label="容量" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="所属区域" width="200" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.province}}/{{scope.row.city}}/{{scope.row.district}}</div>
              </template>
          </el-table-column>
          <el-table-column prop="address" label="地址" width="200" :show-overflow-tooltip="true"></el-table-column>
            <template #empty>
              <el-empty description="暂无数据" />
            </template>
          </el-table>
          <div class="pageFlex pageAlignCenter pageSpaceBetween" style="margin-top: 20px;">
            <div class="totalText">共计 {{warehouseTotal}} 条</div>
            <el-pagination background layout="prev, pager, next" :total="warehouseTotal" :current-page="warehouseParams.pageNum" :page-size="warehouseParams.pageSize" @current-change="handleTablePageChange"/>
          </div>
        </div>
        <div class="lineBox"></div>
        <div class="bottomBox pageFlex pageFlexCenter">
          <el-button @click="clearTableModalChoose">清空当前选择</el-button>
          <el-button type="primary" :disabled="!warehouseCur" @click="confirmTableModalChoose">确认选择</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="shelfShow" title="选择货架" width="600">
      <div class="tableModalBox" v-if="shelfShow">
        <div class="tableModalBox_top pageFlex pageAlignCenter">
          <div class="line"></div>
          <div class="title">请进行选择</div>
        </div>
        <div class="searchBox">
          <el-form :model="shelfParams" ref="shelfTableModal" :inline="true" @submit.prevent>
            <el-form-item prop="name" style="margin: 0 6px 0 0;">
              <el-input
                  class="inputBox"
                  v-model="shelfParams.name"
                  placeholder="请输入货架名称"
                  clearable
                  @keyup.enter="handleTableModalQuery()"
              />
            </el-form-item>
            <el-form-item style="margin: 0 6px 0 0;">
              <el-button class="normalFormBg searchBtn" icon="Search" @click="handleTableModalQuery()"></el-button>
              <el-button class="normalFormBg searchBtn" icon="Refresh" @click="resetTableModalQuery()"></el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="tableBox">
          <el-table
            ref="shelfTableRef"
            v-loading="shelfLoading"
            :data="shelfDataList"
            border
            height="400"
            @select="handleTableModalSelect"
            @select-all="handleTableModalAll">
            <el-table-column type="selection" width="55" :selectable="setTableModalSelectable"/>
            <el-table-column prop="id" label="货架ID" width="200" :show-overflow-tooltip="true" fixed="left"></el-table-column>
            <el-table-column prop="name" label="货架名称" width="200" :show-overflow-tooltip="true" fixed="left"></el-table-column>
            <el-table-column prop="cover" label="货架图片" width="100" align="center">
              <template #default="scope">
                <div class="tableImgBox2">
                  <el-image class="img" fit="contain" lazy :src="setCoverUrl(scope.row.cover)" v-if="scope.row.cover" />
                  <div class="emptyBox" v-else>暂无图片</div>
                </div>
              </template>
            </el-table-column>
            <template #empty>
              <el-empty description="暂无数据" />
            </template>
          </el-table>
          <div class="pageFlex pageAlignCenter pageSpaceBetween" style="margin-top: 20px;">
            <div class="totalText">共计 {{shelfTotal}} 条</div>
            <el-pagination background layout="prev, pager, next" :total="shelfTotal" :current-page="shelfParams.pageNum" :page-size="shelfParams.pageSize" @current-change="handleTablePageChange"/>
          </div>
        </div>
        <div class="lineBox"></div>
        <div class="bottomBox pageFlex pageFlexCenter">
          <el-button @click="clearTableModalChoose">清空当前选择</el-button>
          <el-button type="primary" :disabled="!shelfCur" @click="confirmTableModalChoose">确认选择</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="locationShow" title="选择货位" width="635">
      <div class="tableModalBox" v-if="locationShow">
        <div class="tableModalBox_top pageFlex pageAlignCenter">
          <div class="line"></div>
          <div class="title">请进行选择</div>
        </div>
        <div class="searchBox">
          <el-form :model="locationParams" ref="locationTableModal" :inline="true" @submit.prevent>
            <el-form-item prop="name" style="margin: 0 6px 0 0;">
              <el-input
                  class="inputBox"
                  v-model="locationParams.name"
                  placeholder="请输入货位名称"
                  clearable
                  @keyup.enter="handleTableModalQuery()"
              />
            </el-form-item>
            <el-form-item style="margin: 0 6px 0 0;">
              <el-button class="normalFormBg searchBtn" icon="Search" @click="handleTableModalQuery()"></el-button>
              <el-button class="normalFormBg searchBtn" icon="Refresh" @click="resetTableModalQuery()"></el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="tableBox">
          <el-table
            ref="locationTableRef"
            v-loading="locationLoading"
            :data="locationDataList"
            border
            height="400"
            @select="handleTableModalSelect"
            @select-all="handleTableModalAll">
            <el-table-column type="selection" width="55" :selectable="setTableModalSelectable"/>
            <el-table-column prop="id" label="货位ID" width="150" :show-overflow-tooltip="true" fixed="left"></el-table-column>
            <el-table-column prop="locationNo" label="货位编码" width="150" :show-overflow-tooltip="true" fixed="left"></el-table-column>
            <el-table-column prop="name" label="货位名称" width="200" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="cover" label="货位图片" width="80" align="center">
              <template #default="scope">
                <div class="tableImgBox2">
                  <el-image class="img" fit="contain" lazy :src="setCoverUrl(scope.row.cover)" v-if="scope.row.cover" />
                  <div class="emptyBox" v-else>暂无图片</div>
                </div>
              </template>
            </el-table-column>
            <template #empty>
              <el-empty description="暂无数据" />
            </template>
          </el-table>
          <div class="pageFlex pageAlignCenter pageSpaceBetween" style="margin-top: 20px;">
            <div class="totalText">共计 {{locationTotal}} 条</div>
            <el-pagination background layout="prev, pager, next" :total="locationTotal" :current-page="locationParams.pageNum" :page-size="locationParams.pageSize" @current-change="handleTablePageChange"/>
          </div>
        </div>
        <div class="lineBox"></div>
        <div class="bottomBox pageFlex pageFlexCenter">
          <el-button @click="clearTableModalChoose">清空当前选择</el-button>
          <el-button type="primary" :disabled="!locationCur" @click="confirmTableModalChoose">确认选择</el-button>
        </div>
      </div>
    </el-dialog>
    <el-image-viewer :url-list="srcList" @close="handlePreviewClose" v-if="showPreview"/>
  </div>
</template>
<script setup>
import { computed, nextTick, onMounted } from 'vue';
import { searchInventoryRecordApi } from '@/api/gasManage/stockManage/inventoryHistory';
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const { proxy } = getCurrentInstance();
const { good_in_out_storage } = proxy.useDict("good_in_out_storage");
const setCoverUrl = computed(()=>{
  return url => {
    if(url){
      return baseUrl+url
    }
    return  ''
  }
});
const setTimeFormat = computed(() => {
  return time => {
    if(time){
      let date = new Date(time);
      return date.toLocaleString()
    }
    return ''
  }
})
// --------------------------------查看图片---------------------------------
const showPreview = ref(false);
const srcList = ref([]);
function handlePreviewShow(link){
  srcList.value = [link];
  showPreview.value = true;
}
function handlePreviewClose(){
  showPreview.value = false;
  srcList.value = [];
}
// ---------------------------------查询------------------------------------
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  operationType: '',
  goodsName: '',
  goodsId: '',
  entryVoucherNo: '',
  exitVoucherNo: '',
  warehouseId: '',
  shelfId: '',
  locationId: '',
  time: ''
})
const loading = ref(false);
const total = ref(0);
const dataList = ref([]);
function handleQuery(){
  queryParams.value.pageNum = 1;
  getList();
}
function resetQuery(){
  proxy.resetForm("queryRef");
  handleQuery();
}
async function getList(){
  loading.value = true;
  let params = JSON.parse(JSON.stringify(queryParams.value));
  if(params.time){
    params.startTime = params.time[0];
    params.endTime = params.time[1];
    delete params.time;
  }
  let data = await getInventoryRecordApi(params);
  if(data && Array.isArray(data)){
    dataList.value = data;
  }else{
    dataList.value = [];
  }
  loading.value = false;
}
function handleCurrentChange(e){
  queryParams.value.pageNum = e;
  getList();
}
function handleSizeChange(e){
  if(queryParams.value.pageNum !== 1){
    queryParams.value.pageNum = 1;
  }
  queryParams.value.pageSize = e;
  getList();
}
function getInventoryRecordApi(params){
  return new Promise(resolve => {
    searchInventoryRecordApi(params).then(res => {
      total.value = Number(res.total);
      resolve(Array.isArray(res.rows) ? res.rows : []);
    }).catch(() => {resolve(false)})
  })
}
// --------------------------------------表格弹窗统一处理----------------------------
import { searchWarehouseApi } from '@/api/gasManage/stockManage/storageManage';
import { searchLocationApi } from '@/api/gasManage/stockManage/locationManage';
import { searchShelvesApi } from '@/api/gasManage/stockManage/shelfManage';
function showTableModal(name){
  shelfShow.value = false;
  shelfCur.value = null;
  warehouseShow.value = false;
  warehouseCur.value = null;
  locationShow.value = false;
  locationCur.value = null;
  if(name === 'warehouseId'){
    warehouseShow.value = true;
    nextTick(()=>{
      proxy.$refs.warehouseTableRef.clearSelection();
    })
  }else if(name === 'shelfId'){
    shelfShow.value = true;
    shelfParams.value.warehouseId = queryParams.value.warehouseId;
    nextTick(()=>{
      proxy.$refs.shelfTableRef.clearSelection();
    })
  }else if(name === 'locationId'){
    locationShow.value = true;
    locationParams.value.warehouseId = queryParams.value.warehouseId;
    locationParams.value.shelfId = queryParams.value.shelfId;
    nextTick(()=>{
      proxy.$refs.locationTableRef.clearSelection();
    })
  }
  handleTableModalQuery();
}
function handleTableModalQuery(){
  if(warehouseShow.value){
    warehouseParams.value.pageNum = 1;
  }else if(shelfShow.value){
    shelfParams.value.pageNum = 1;
  }else if(locationShow.value){
    locationParams.value.pageNum = 1;
  }
  handleGetTableList();
}
function handleGetTableList(){
  if(warehouseShow.value){
    warehouseLoading.value = true;
    searchWarehouseApi(warehouseParams.value).then(res=>{
      warehouseTotal.value = Number(res.total);
      warehouseDataList.value = Array.isArray(res.rows) ? res.rows : [];
      warehouseLoading.value = false;
      if(queryParams.value.warehouseId && warehouseDataList.value.length){
        let index = warehouseDataList.value.findIndex(item=>item.id === queryParams.value.warehouseId);
        console.log(index)
        if(index !== -1){
          nextTick(()=>{
            warehouseCur.value = warehouseDataList.value[index];
            proxy.$refs.warehouseTableRef.toggleRowSelection(warehouseCur.value, true);
          })
        }
      }
    }).catch(()=>{
      warehouseLoading.value = false;
      warehouseDataList.value = [];
    })
  }else if(shelfShow.value){
    shelfLoading.value = true;
    searchShelvesApi(shelfParams.value).then(res=>{
      shelfTotal.value = Number(res.total);
      shelfDataList.value = Array.isArray(res.rows) ? res.rows : [];
      shelfLoading.value = false;
      if(queryParams.value.shelfId && shelfDataList.value.length){
        let index = shelfDataList.value.findIndex(item=>item.id === queryParams.value.shelfId);
        if(index !== -1){
          nextTick(()=>{
            shelfCur.value = shelfDataList.value[index];
            proxy.$refs.shelfTableRef.toggleRowSelection(shelfCur.value, true);
          })
        }
      }
    }).catch(()=>{
      shelfLoading.value = false;
      shelfDataList.value = [];
    })
  }else if(locationShow.value){
    locationLoading.value = true;
    searchLocationApi(locationParams.value).then(res=>{
      locationTotal.value = Number(res.total);
      locationDataList.value = Array.isArray(res.rows) ? res.rows : [];
      locationLoading.value = false;
      if(queryParams.value.locationId && locationDataList.value.length){
        let index = locationDataList.value.findIndex(item=>item.id === queryParams.value.locationId);
        if(index !== -1){
          nextTick(()=>{
            locationCur.value = locationDataList.value[index];
            proxy.$refs.locationTableRef.toggleRowSelection(locationCur.value, true);
          })
        }
      }
    }).catch(()=>{
      locationLoading.value = false;
      locationDataList.value = [];
    })
  }
}
function resetTableModalQuery(){
  if(warehouseShow.value){
    proxy.resetForm("warehouseTableModal");
  }else if(shelfShow.value){
    proxy.resetForm("shelfTableModal");
  }else if(locationShow.value){
    proxy.resetForm("locationTableModal");
  }
  handleTableModalQuery();
}
function handleTableModalSelect(e){
  let data = e[0];
  if(warehouseShow.value){
    if(e.length > 1){
      data = e[1]
    }
    if(!data || (warehouseCur.value && warehouseCur.value.id && warehouseCur.value.id === data.id)){
      warehouseCur.value = null;
      return false;
    }
    let index = warehouseDataList.value.findIndex(item=>item.id === data.id);
    proxy.$refs.warehouseTableRef.clearSelection();
    warehouseCur.value = data;
    proxy.$refs.warehouseTableRef.toggleRowSelection(warehouseDataList.value[index], true);
  }else if(shelfShow.value){
    if(e.length > 1){
      data = e[1]
    }
    if(!data || (shelfCur.value && shelfCur.value.id && shelfCur.value.id === data.id)){
      shelfCur.value = null;
      return false;
    }
    let index = shelfDataList.value.findIndex(item=>item.id === data.id);
    proxy.$refs.shelfTableRef.clearSelection();
    shelfCur.value = data;
    proxy.$refs.shelfTableRef.toggleRowSelection(shelfDataList.value[index], true);
  }else if(locationShow.value){
    if(e.length > 1){
      data = e[1]
    }
    if(!data || (locationCur.value && locationCur.value.id && locationCur.value.id === data.id)){
      locationCur.value = null;
      return false;
    }
    let index = locationDataList.value.findIndex(item=>item.id === data.id);
    proxy.$refs.locationTableRef.clearSelection();
    locationCur.value = data;
    proxy.$refs.locationTableRef.toggleRowSelection(locationDataList.value[index], true);
  }
}
function handleTableModalAll(){
  if(warehouseShow.value){
    proxy.$refs.warehouseTableRef.clearSelection();
    warehouseCur.value = null;
  }else if(shelfShow.value){
    proxy.$refs.shelfTableRef.clearSelection();
    shelfCur.value = null;
  }else if(locationShow.value){
    proxy.$refs.locationTableRef.clearSelection();
    locationCur.value = null;
  }
}
function setTableModalSelectable(row){
  return row.isEnable != 0
}
function handleTablePageChange(e){
  if(warehouseShow.value){
    warehouseParams.value.pageNum = e;
  }else if(shelfShow.value){
    shelfParams.value.pageNum = e;
  }else if(locationShow.value){
    locationParams.value.pageNum = e;
  }
  handleGetTableList();
}
function clearTableModalChoose(){
  if(warehouseShow.value){
    queryParams.value.warehouseId = '';
    queryParams.value.shelfId = '';
    queryParams.value.locationId = '';
    proxy.$refs.warehouseTableRef.clearSelection();
  }else if(shelfShow.value){
    queryParams.value.shelfId = '';
    queryParams.value.locationId = '';
    proxy.$refs.shelfTableRef.clearSelection();
  }else if(locationShow.value){
    queryParams.value.locationId = '';
    proxy.$refs.locationTableRef.clearSelection();
  }
  hideTableModal();
  handleQuery();
}
function confirmTableModalChoose(){
  if(warehouseShow.value){
    queryParams.value.warehouseId = warehouseCur.value.id;
    queryParams.value.shelfId = '';
    queryParams.value.locationId = '';
  }else if(shelfShow.value){
    queryParams.value.shelfId = shelfCur.value.id;
    queryParams.value.locationId = '';
  }else if(locationShow.value){
    queryParams.value.locationId = locationCur.value.id;
  }
  hideTableModal();
  getList();
}
function hideTableModal(){
  if(warehouseShow.value){
    warehouseShow.value = false;
  }else if(shelfShow.value){
    shelfShow.value = false;
  }else if(locationShow.value){
    locationShow.value = false;
  }
}
// ------------------------------选择仓库---------------------------
const warehouseShow = ref(false);
const warehouseLoading = ref(false);
const warehouseDataList = ref([]);
const warehouseTotal = ref(0);
const warehouseCur = ref(null);
const warehouseParams = ref({
  pageNum: 1,
  pageSize: 10,
  name: ''
});
// ------------------------------选择货架---------------------------
const shelfShow = ref(false);
const shelfLoading = ref(false);
const shelfDataList = ref([]);
const shelfTotal = ref(0);
const shelfCur = ref(null);
const shelfParams = ref({
  pageNum: 1,
  pageSize: 10,
  warehouseId: '',
  name: ''
});
// ------------------------------选择货位---------------------------
const locationShow = ref(false);
const locationLoading = ref(false);
const locationDataList = ref([]);
const locationTotal = ref(0);
const locationCur = ref(null);
const locationParams = ref({
  pageNum: 1,
  pageSize: 10,
  warehouseId: '',
  shelfId: '',
  name: ''
});
// ----------------------------------记录详情-------------------------------------
const modalShow = ref(false);
const modalTitle = ref('');
const form = ref({});
function handleDetail(row){
  handleModalShow(row.operationType === 0 ? '入库记录详情' : '出库记录详情');
  form.value = row;
}
function handleModalShow(name){
  proxy.resetForm('formRef');
  modalTitle.value = name;
  modalShow.value = true;
}
// ----------------------------导出--------------------------------
function handleExport(){
  let params = JSON.parse(JSON.stringify(queryParams.value));
  if(params.time){
    params.startTime = params.time[0];
    params.endTime = params.time[1];
    delete params.time;
  }
  proxy.download("stock/inventoryRecord/export", {
    ...params
  }, `出入库记录_${new Date().toLocaleDateString()}.xlsx`);
}
onMounted(()=>{
  getList();
})
</script>
<style lang='scss' scoped>
@import "@/assets/styles/public.scss";
.normalBtn{
  &_icon2{
    margin-right: 10px;
    color: $normalBtnColor;
  }
}
.app-container{
  width: 100%;
  min-height: calc(100vh - 66px);
  background: #F8F8F9;
}
.contentBox{
  width: 100%;
  min-height: $pageMinHeight;
  background-color: #FFFFFF;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 12px;
  .searchBox{
    :deep(.el-input__wrapper){
      background-color: $formBgSet;
      box-shadow: none;
    }
    :deep(.el-select){
      .el-select__wrapper{
        background-color: $formBgSet;
        box-shadow: none;
      }
    }
    .inputBox{
      width: 240px;
    }
    .searchBtn{
      width: 32px;
      height: 32px;
      font-size: 12px;
      padding: 0;
      border: none;
      margin: 0 6px 0 0px;
    }
  }
  .btnSetBox{
    padding: 0 10px;
    box-sizing: border-box;
    border-right: 1px solid $borderColor;
    cursor: pointer;
    .text{
      height: 16px;
      line-height: 16px;
      color: var(--el-color-primary);
    }
    .img{
      width: 16px;
      height: 16px;
      margin-right: 2px;
    }
    &:last-child{
      border-right: none;
    }
  }
  .totalText{
    height: 22px;
    font-weight: 400;
    font-size: 14px;
    color: #1D2129;
    line-height: 22px;
  }
  .searchValueBox{
    min-width: 240px;
    height: 32px;
    background-color: $formBgSet;
    padding: 0 10px;
    color: var(--el-text-color-regular);
    cursor: pointer;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    .value{
      flex: 1;
    }
  }
}
:deep(.el-drawer){
  .el-drawer__header{
    margin: 0;
    padding-bottom: 20px;
  }
  .el-drawer__body{
    padding: 0;
  }
}
.descriptionsContent{
  width: 375px;
  :deep(p){
    width: 375px;
  }
  :deep(img){
    width: 375px;
  }
}
</style>